<script setup>
import { getSalesBoardXsdqChina } from "@/api/visual/salesBoard";
import { fontSize } from "@/utils/globalMethod.js";

const props = defineProps({
  map: {
    type: String,
    default: "",
  },
});
const type = ref("china");
const emits = defineEmits(["update:modelValue", "selected"]);

const mapData = ref([]);

const option = computed(() => ({
  title: {
    text: "客户销售分布",
    left: 16,
    top: 16,
    textStyle: {
      color: "#fff",
      fontSize: fontSize(0.16),
    },
  },
  // 弹层
  tooltip: {
    trigger: "item",
    backgroundColor: "rgba(10, 25, 50, 0.85)",
    borderColor: "rgba(64, 164, 255, 0.7)",
    borderWidth: 1,
    textStyle: {
      color: "#e0f0ff",
      fontSize: fontSize(0.12),
    },
    formatter: function (params) {
      return `<b>${
        params.name
      }</b><br/>销售金额: <span style="color:#4facfe;font-weight:bold">${
        params.value || 0
      }</span>`;
    },
  },
  dataRange: {
    x: "left",
    y: "bottom",
    text: ["高", "低"],
    min: 0,
    max: Math.max(...mapData.value.map((item) => item.value), 0),
    realtime: false,
    calculable: true,
    inRange: {
      color: ["#0a2b43", "#ff9985", "#f57567", "#e64546", "#cf2121", "#c00000"],
    },
    textStyle: {
      color: "#fff",
      fontSize: fontSize(0.12),
    },
  },

  series: [
    {
      geoIndex: 1,
      name: "销售数量",
      type: "map",
      map: "china",
      coordinateSystem: "geo",
      data: mapData.value,
      zoom: 1.6,
      left: "25%",
      top: "25%",
      roam: true,
      label: {
        show: true,
        color: "#fff",
        fontSize: fontSize(0.12),
      },
      itemStyle: {
        areaColor: "#0c3653",
        borderWidth: 1,
        borderColor: "#17caf0",
      },
    },
  ],
}));

const loadData = async () => {
  const { data } = await getSalesBoardXsdqChina();
  mapData.value = data;
};

const chooseMap = () => {
  if (type.value === "world") {
    option.value.series[0].map = "world";
  } else {
    option.value.series[0].map = "china";
  }
  emits("map-loaded", type.value);
};
onMounted(loadData);
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box1>
      <div style="position: absolute; top: 20px; right: 20px; z-index: 999">
        <select class="chart-select" v-model="type" @change="chooseMap">
          <option value="china">中国地图</option>
          <option value="world">世界地图</option>
        </select>
      </div>
      <ps-chart2 :option="option"></ps-chart2>
    </dv-border-box1>
  </div>
</template>

<style scoped lang="scss">
:deep(.border-box-content) {
  padding: 0 15px 10px;
}
</style>
